<template>
  <!-- 初始化echarts需要一个有宽高的盒子 -->
  <div id="citychart"></div>
</template>

<script>

import beijing from '../../../../../assets/lib/province/beijing.json'
import anhui from '../../../../../assets/lib/province/anhui.json'
import aomen from '../../../../../assets/lib/province/aomen.json'
import chongqing from '../../../../../assets/lib/province/chongqing.json'
import fujian from '../../../../../assets/lib/province/fujian.json'
import gansu from '../../../../../assets/lib/province/gansu.json'
import guangdong from '../../../../../assets/lib/province/guangdong.json'
import guangxi from '../../../../../assets/lib/province/guangxi.json'
import guizhou from '../../../../../assets/lib/province/guizhou.json'
import hainan from '../../../../../assets/lib/province/hainan.json'
import hebei from '../../../../../assets/lib/province/hebei.json'

import heilongjiang from '../../../../../assets/lib/province/heilongjiang.json'
import henan from '../../../../../assets/lib/province/henan.json'
import hubei from '../../../../../assets/lib/province/hubei.json'
import hunan from '../../../../../assets/lib/province/hunan.json'
import jiangsu from '../../../../../assets/lib/province/jiangsu.json'
import jiangxi from '../../../../../assets/lib/province/jiangxi.json'
import jilin from '../../../../../assets/lib/province/jilin.json'
import liaoling from '../../../../../assets/lib/province/liaoling.json'
import mongolia from '../../../../../assets/lib/province/mongolia.json'
import ningxia from '../../../../../assets/lib/province/ningxia.json'
import qinghai from '../../../../../assets/lib/province/qinghai.json'
import shandong from '../../../../../assets/lib/province/shandong.json'
import shanghai from '../../../../../assets/lib/province/shanghai.json'
import shanxi from '../../../../../assets/lib/province/shanxi.json'
import shanxi2 from '../../../../../assets/lib/province/shanxi2.json'
import sichuan from '../../../../../assets/lib/province/sichuan.json'
import taiwan from '../../../../../assets/lib/province/taiwan.json'
import tianjing from '../../../../../assets/lib/province/tianjing.json'
import xianggang from '../../../../../assets/lib/province/xianggang.json'
import xinjiang from '../../../../../assets/lib/province/xinjiang.json'
import xizang from '../../../../../assets/lib/province/xizang.json'
import yunnan from '../../../../../assets/lib/province/yunnan.json'
import zhejiang from '../../../../../assets/lib/province/zhejiang.json'


import jsonp from 'jsonp'
import options from './options'
export default {
  name: 'MapCity',
  mounted(){
    this.$echarts.registerMap('beijing', beijing);
    this.$echarts.registerMap('anhui', anhui);
    this.$echarts.registerMap('aomen', aomen);
    this.$echarts.registerMap('chongqing', chongqing);
    this.$echarts.registerMap('fujian', fujian);
    this.$echarts.registerMap('gansu', gansu);
    this.$echarts.registerMap('guangdong', guangdong);
    this.$echarts.registerMap('guangxi', guangxi);
    this.$echarts.registerMap('guizhou', guizhou);
    this.$echarts.registerMap('hainan', hainan);
    this.$echarts.registerMap('hebei', hebei);
    this.$echarts.registerMap('heilongjiang', heilongjiang);
    this.$echarts.registerMap('henan', henan);
    this.$echarts.registerMap('hubei', hubei);
    this.$echarts.registerMap('hunan', hunan);
    this.$echarts.registerMap('jiangsu', jiangsu);
    this.$echarts.registerMap('jiangxi', jiangxi);
    this.$echarts.registerMap('jilin', jilin);
    this.$echarts.registerMap('liaoling', liaoling);
    this.$echarts.registerMap('mongolia', mongolia);
    this.$echarts.registerMap('ningxia', ningxia);
    this.$echarts.registerMap('qinghai', qinghai);
    this.$echarts.registerMap('shandong', shandong);
    this.$echarts.registerMap('shanghai', shanghai);
    this.$echarts.registerMap('shanxi', shanxi);
    this.$echarts.registerMap('shanxi2', shanxi2);
    this.$echarts.registerMap('sichuan', sichuan);
    this.$echarts.registerMap('taiwan', taiwan);
    this.$echarts.registerMap('tianjing', tianjing);
    this.$echarts.registerMap('xianggang', xianggang);
    this.$echarts.registerMap('xinjiang', xinjiang);
    this.$echarts.registerMap('xizang', xizang);
    this.$echarts.registerMap('yunnan', yunnan);
    this.$echarts.registerMap('zhejiang', zhejiang);
    this.mychart = this.$echarts.init(document.getElementById('citychart'));
    this.drawMap(0)
  },
  props:{
    cityNum:{
      type:Number
    }
  },
  watch:{
      cityNum:{
        handler:function(nCityNum){
          this.drawMap(nCityNum);
        }
      }
  },
  methods:{
     resizeTheChart() {
      if (this.$refs && this.$refs.mapbox) {
        let mychartNode = document.getElementById('mychart');
        mychartNode.style.height = '700px'
        this.mychart.resize();
      }
    },
    getData(city){
      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
        if(!err){
          let list = data.data.list[city].city.map(item=>({name:item.name,value:item.conNum,total:item.conNum,deathNum:item.deathNum,cureNum:item.cureNum}))
          let tmpdata = data.data.list[city]
          let citydata = {name:tmpdata.name,value:tmpdata.value,total:tmpdata.value,deathNum:tmpdata.deathNum,cureNum:tmpdata.cureNum}
          options.option_city[city].series[0].data = list
          options.option_city[city].series[0].data.push(citydata)
          console.log(citydata)
          if(city===0){
            let tmpcity={name:"平谷区",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
          }
          if(city===2){
            let tmpcity={name:"云浮",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
          }
          if(city===6){
            let tmpcity={name:"南川",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
          }
          if(city===9){
            let tmpcity={name:"东营",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"莱芜",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)
          }
          if(city===15){
            let tmpcity={name:"崇左",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
          }
          if(city==16){
            let tmpcity={name:"屯昌",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"五指山",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity2={name:"白沙黎族",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)
            options.option_city[city].series[0].data.push(tmpcity2)
          }
          if(city==21){
            let tmpcity={name:"迪庆",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"怒江傈僳族",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)            
          }
          if(city==22){
            let tmpcity={name:"静海区",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"蓟州区",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)             
          }
          if(city==24){
            let tmpcity={name:"酒泉",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"武威",value:0,total:0,deathNum:0,cureNum:0}            
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)        
            let tmpcity2={name:"嘉峪关",value:0,total:0,deathNum:0,cureNum:0}            
            options.option_city[city].series[0].data.push(tmpcity2)          
          }
          if(city==25){
            let tmpcity={name:"阿拉善盟",value:0,total:0,deathNum:0,cureNum:0}           
            options.option_city[city].series[0].data.push(tmpcity)
          }
          if(city==30){
            let tmpcity={name:"阿里",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"那曲",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity2={name:"昌都",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)
            options.option_city[city].series[0].data.push(tmpcity2)
            let tmpcity3={name:"林芝",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity4={name:"山南",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity5={name:"日喀则",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity3)
            options.option_city[city].series[0].data.push(tmpcity4)
            options.option_city[city].series[0].data.push(tmpcity5)              
          }
          if(city==31){
            let tmpcity={name:"海西",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"海东",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity2={name:"海南",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)
            options.option_city[city].series[0].data.push(tmpcity2)
            let tmpcity3={name:"果洛",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity4={name:"玉树",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity5={name:"黄南",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity3)
            options.option_city[city].series[0].data.push(tmpcity4)
            options.option_city[city].series[0].data.push(tmpcity5)  
          }
          if(city==32){
            let tmpcity={name:"阿勒泰",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity1={name:"塔城",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity2={name:"博尔塔拉",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity)
            options.option_city[city].series[0].data.push(tmpcity1)
            options.option_city[city].series[0].data.push(tmpcity2)
             let tmpcity3={name:"克拉玛依",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity4={name:"哈密",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity5={name:"阿拉尔",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity3)
            options.option_city[city].series[0].data.push(tmpcity4)
            options.option_city[city].series[0].data.push(tmpcity5)
            let tmpcity6={name:"北屯",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity7={name:"双河",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity8={name:"可克达拉",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity6)
            options.option_city[city].series[0].data.push(tmpcity7)
            options.option_city[city].series[0].data.push(tmpcity8)
            let tmpcity9={name:"铁门关",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity10={name:"图木舒克",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity11={name:"和田",value:0,total:0,deathNum:0,cureNum:0}
            let tmpcity12={name:"昆玉",value:0,total:0,deathNum:0,cureNum:0}
            options.option_city[city].series[0].data.push(tmpcity9)
            options.option_city[city].series[0].data.push(tmpcity10)
            options.option_city[city].series[0].data.push(tmpcity11)
            options.option_city[city].series[0].data.push(tmpcity12)

          }
          console.log(list)
          this.mychart.setOption(options.option_city[city])
        }
      })
    },
    drawMap(city){
      this.getData(city)
      this.mychart.setOption(options.option_city[city])
      this.resizeTheChart()
    },

  }
}
</script>

<style scoped>
#citychart{
  width: 36vw;
  height: 100%;
  background: transparent;
}
</style>